<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button">北京</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list">
					<div class="button-wrapper" v-for="item of hot" :key="item.id">
						<div class="button">{{item.name}}</div>
					</div>
				</div>
				
			</div>
			<div class="area" 
			v-for="(item,key) of citys" 
			:key="key"
			:ref="key"
			>
				<div class="title border-topbottom">{{key}}</div>
				<div class="item-list">
					<div 
					class="item border-bottom" v-for="innerItem of item" :key="innerItem.id"
					>{{innerItem.name}}</div>
				</div>
			</div> 
		</div> 
	</div>
</template>

<script>
	
	import BScroll from 'better-scroll'
	
	export default {
		name : 'List',
		props:{
			hot:Array,
			citys:Object,
			letter : String
		},
		mounted () { 
			this.scroll = new BScroll(this.$refs.wrapper)
		},
		//侦听器  当letter改变的时候触发
		watch:{
			letter(){
				//判断letter是否为空，如果不为空那么执行
				if(this.letter){
					//因为每个组件都是循环出现的，所以可以通过ref来获取组件，由于是循环的，所以需要加上[0]
					//this.scroll.scrollToElement是vue自带的方法，可以让页面滚动到指定位置
					const element = this.$refs[this.letter][0]
					this.scroll.scrollToElement(element);
				}
			}
		}
	}
	
</script>


<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.border-topbottom
	 &:before
	  border-color:#ccc
	 &:after
	  border-color:#ccc
	.border-bottom
	 &:before
	  border-color:#ccc
	 &:after
	  border-color:#ccc
	.list
	 overflow:hidden
	 position:absolute
	 top:1.58rem
	 left:0
	 bottom:0
	 right:0
	 .title
	  line-height:.4rem
	  background:#eee
	  padding-left:.2rem
	  line-height:.54rem
	 .button-list
	  padding:.1rem
	  overflow:hidden
	  padding:.1rem .6rem .1rem .1rem
	  .button-wrapper
	   width:33.33%
	   float:left
	   .button
	    text-align:center
	    margin:.1rem
	    padding:.1rem 0
	    border-radius:.06rem
	    border:.02rem solid #ccc
	 .item-list
	   .item
	    line-height:.54rem
	    color:#666
	    padding-left:.2rem
	
	
</style>